<template>
  <view class="tabs-container">
    <!-- 标签栏 -->
    <view class="tabs-header">
      <view
        v-for="(item, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === item.name }"
        @click="changeTab(item.name, index)"
      >
        <text>{{ item.label }}</text>
        <view class="tab-line" v-if="currentTab === item.name"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <swiper
      class="tabs-content"
      :current="currentIndex"
      @change="swiperChange"
      :duration="300"
      :style="{ height: contentHeight }"
    >
      <swiper-item v-for="(item, index) in tabs" :key="index" class="swiper-item">
        <view class="swiper-item-content">
          <slot :name="item.name">
            <!-- 默认内容，当没有提供对应名称的插槽时显示 -->
            <view class="empty-content">暂无内容</view>
          </slot>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup name="Tabs">
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'

// 定义Tab项的类型
interface TabItem {
  name: string
  label: string
  [key: string]: any
}

// 定义组件属性
const props = defineProps({
  // 标签页数据
  tabs: {
    type: Array as () => TabItem[],
    default: () => [],
  },
  // 默认选中的标签页名称
  defaultTab: {
    type: String,
    default: '',
  },
  // 内容区域高度
  height: {
    type: String,
    default: '300px',
  },
})

// 定义事件
const emit = defineEmits(['change'])

// 当前选中的标签页索引和名称
const currentIndex = ref(0)
const currentTab = ref('')

// 计算内容区域高度
const contentHeight = ref(props.height)

// 初始化当前选中的标签
watch(
  () => props.tabs,
  (newTabs) => {
    if (newTabs.length > 0) {
      // 如果有默认选中的标签，则使用默认值，否则使用第一个标签
      if (props.defaultTab && newTabs.some((tab) => tab.name === props.defaultTab)) {
        currentTab.value = props.defaultTab
        currentIndex.value = newTabs.findIndex((tab) => tab.name === props.defaultTab)
      } else {
        currentTab.value = newTabs[0].name
        currentIndex.value = 0
      }
    }
  },
  { immediate: true },
)

// 切换标签页
const changeTab = (name: string, index: number) => {
  if (currentTab.value !== name) {
    currentTab.value = name
    currentIndex.value = index
    emit('change', { name, index })
  }
}

// 滑动切换事件
const swiperChange = (e: any) => {
  const { current } = e.detail
  if (current !== currentIndex.value && props.tabs[current]) {
    changeTab(props.tabs[current].name, current)
  }
}
</script>

<style scoped lang="scss">
.tabs-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  .tabs-header {
    display: flex;
    height: 80rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;

    .tab-item {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #666;

      &.active {
        font-weight: bold;
        color: #2979ff;
      }

      .tab-line {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 60rpx;
        height: 4rpx;
        background-color: #2979ff;
        border-radius: 2rpx;
        transform: translateX(-50%);
      }
    }
  }

  .tabs-content {
    width: 100%;

    .swiper-item {
      height: 100%;

      .swiper-item-content {
        height: 100%;
        overflow-y: auto;
      }

      .empty-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}
</style>
